<template>
  <div class="task-container">
    <div class="index-container"><div class="index" :style="propIndexStyle">{{propIndex}}</div></div>
    <div style="text-align:center"><img :src="getQr(task.busKey)"/></div>
    <div><svg-icon class="icon" icon-class="wi"/><span class="item-detail-text">{{task.deptName}}</span></div>
    <div><svg-icon class="icon" icon-class="calendar"/><span class="item-detail-text">{{task.busDate}}</span></div>
    <div><svg-icon class="icon" icon-class="detail"/><span class="item-detail-text">{{task.distSummary}}</span></div>
  </div>
</template>

<script>
import QrBarcode from 'jr-qrcode'

export default {
  data() {
    return {
      task: this.value
    }
  },
  props: {
    value: Object,
    propIndex: Number,
    propIndexStyle: Object
  },
  methods: {
    getQr(text) {
      const options = {
        width: 100,
        height: 100
      }
      return QrBarcode.getQrBase64(text, options)
    }
  },
}
</script>

<style lang="scss" scoped>
  .task-container {
    background-color: #fff;
    border: 1px solid lightgray;
    box-shadow: 2px 2px 3px  #bbb;
    padding: 5px 10px 5px 10px;
    height: 215px;
  }
  .index {
    margin-top: 5px;
    width:24px;
    height: 24px;
    border-radius: 12px;
    line-height: 24px;
    text-align: center;
    color: white;
  }
  .index-container {
    display: flex;
    justify-content: center;
  }
  .icon {
    font-size: 16px;
  }
  .item-detail-text {
    font-size: 14px;
    padding-left: 10px;
  }
</style>
